<template>
  <div class="hello">
    <div>自定义过滤 & 排序</div>
    <div>受控的多列排序</div>
    <div>如果列对象的 sortOrder 属性被设为 'ascend'、'descend' 或者 false，表格的排序将为受控状态。</div>

    <div> 如果你只需要 UI显示多列排序的状态，那么不传 ‘compare’ 即可。</div>

    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      @update:sorter="handleUpdateSorter"
    />
  </div>
</template>

<script>
// export default {
//   name: "home-page",
//   props: {
//     msg: String,
//   },
//   //   setup(props,content){
//   //       const itemData = ref([])
//   //       return{
//   //         itemData
//   //       }
//   //   }
// };
import { defineComponent, ref, h, computed } from "vue";
import { NTag, NButton, NEllipsis, NIcon, NAvatar } from "naive-ui";
import {
  CloseCircle as ResultClose,
  CheckmarkCircleSharp as ResultRight,
} from "@vicons/ionicons5";
const data = [
  {
    key: 0,
    name: "John Brown",
    age: 32,
    chinese: 69,
    math: 60,
    english: 70,
    button: "查看",
    tag: "标签1,标签2,标签3",
    tags: ["nice", "developer"],
  },
  {
    key: 1,
    name: "Jim Green",
    age: 42,
    chinese: 98,
    math: 89,
    english: 89,
    button: "处理",
    tag: "标签1,标签3",
    tags: ["nice", "developer"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    chinese: 67,
    math: 66,
    english: 89,
    button: "删除",
    tag: "标签2,标签3",
    tags: ["nice", "developer"],
  },
  {
    key: 3,
    name: "Jim Red",
    age: 32,
    chinese: 88,
    math: 99,
    english: 89,
    button: "看",
    tag: "标签1,标签3",
    tags: ["nice", "developer"],
  },
];

export default defineComponent({
  setup() {
    const sortStatesRef = ref([]);
    const sortKeyMapOrderRef = computed(() =>
      sortStatesRef.value.reduce((result, { columnKey, order }) => {
        result[columnKey] = order;
        return result;
      }, {})
    );
    const paginationRef = ref({ pageSize: 5 });

    const columnsRef = computed(() => [
      {
        title: "Name",
        key: "name",
      },
      {
        title: "Age",
        key: "age",
        sortOrder: sortKeyMapOrderRef.value.age || false,
        sorter(rowA, rowB) {
          return rowA.age - rowB.age;
        },
      },
      {
        title: "Chinese Score",
        key: "chinese",
        sortOrder: sortKeyMapOrderRef.value.chinese || false,
        sorter: {
          compare: (a, b) => a.chinese - b.chinese,
          multiple: 3,
        },
        render(row) {
          var gg = row.chinese;
          if (gg < 70) {
            const content = [];
            content.push(
              h(
                NIcon,
                {
                  style: {
                    marginTop: "-60px",
                    marginRight: "6px",
                    width: "12px",
                    height: "12px",
                  },
                  component: ResultClose,
                  color: "red",
                  circle: "true",
                },
                {
                  default: () => gg,
                }
              )
            );
            content.push(
              h(
                NEllipsis,
                {
                  style: {
                    marginLeft: "5px",
                    maxWidth: "240px",
                    lineHeight: "26px",
                    color: "red",
                  },
                },
                {
                  default: () => gg,
                }
              )
            );
            return content;
          } else {
            const content = [];
            content.push(
              h(
                NIcon,
                {
                  style: {
                    marginTop: "-60px",
                    marginRight: "6px",
                    width: "12px",
                    height: "12px",
                  },
                  component: ResultRight,
                  color: "green",
                  circle: "true",
                },
                {
                  default: () => gg,
                }
              )
            );
            content.push(
              h(
                NEllipsis,
                {
                  style: {
                    marginLeft: "5px",
                    maxWidth: "240px",
                    lineHeight: "26px",
                    color: "green",
                  },
                },
                {
                  default: () => gg,
                }
              )
            );
            return content;
          }
        },
      },
      {
        title: "Math Score",
        key: "math",
        sortOrder: sortKeyMapOrderRef.value.math || false,
        sorter: {
          compare: (a, b) => a.math - b.math,
          multiple: 2,
        },
      },
      {
        title: "内容前面渲染小圆点",
        key: "math",
        align: "center",
        render(row) {
          var gg = row.math;
          const tags = gg;
          const content = [];
          if (tags < 70) {
            content.push(
              h(
                NAvatar,
                {
                  style: {
                    marginTop: "-60px",
                    marginRight: "6px",
                    width: "8px",
                    height: "8px",
                    backgroundColor: "red",
                  },
                  round: "round",
                },
                {
                  default: () => "",
                }
              )
            );
            content.push(
              h(
                NEllipsis,
                {
                  style: {
                    maxWidth: "240px",
                    lineHeight: "22px",
                    color: "red",
                  },
                },
                {
                  default: () => tags,
                }
              )
            );
          } else {
            content.push(
              h(
                NAvatar,
                {
                  style: {
                    marginTop: "-60px",
                    marginRight: "6px",
                    width: "8px",
                    height: "8px",
                    backgroundColor: "green",
                  },
                  round: "round",
                },
                {
                  default: () => "",
                }
              )
            );

            content.push(
              h(
                NEllipsis,
                {
                  style: {
                    maxWidth: "240px",
                    lineHeight: "22px",
                    color: "green",
                  },
                },
                {
                  default: () => tags,
                }
              )
            );
          }

          return content;
        },
      },
      {
        title: "操作",
        key: "button",
        render(row) {
          var gg = row.button;
          const tags = "详情" + gg;

          return h(
            NButton,
            {
              style: {
                marginRight: "6px",
              },
              type: "info",
            },
            {
              default: () => tags,
            }
          );
        },
      },
      {
        title: "tag 数组",
        key: "tags",
        sortOrder: false,
        sorter: true,
        render(row) {
          const tags = row.tags.map((tagKey) => {
            return h(
              NTag,
              {
                style: {
                  marginRight: "6px",
                },
                type: "info",
              },
              {
                default: () => tagKey,
              }
            );
          });
          return tags;
        },
      },
      {
        title: "tag 字符串 , 分隔",
        key: "tag",
        sortOrder: false,
        sorter: true,
        render(row) {
          const tagArray = row.tag.split(",") || [];
          const tags = tagArray.map((tagKey) => {
            return h(
              NTag,
              {
                style: {
                  marginRight: "6px",
                },
                type: "info",
              },
              {
                default: () => tagKey,
              }
            );
          });
          return tags;
        },
      },
      {
        title: "English Score",
        sortOrder: sortKeyMapOrderRef.value.english || false,
        key: "english",
        sorter: {
          compare: (a, b) => a.english - b.english,
          multiple: 1,
        },
      },
    ]);

    function handleUpdateSorter(sorters) {
      console.log(sorters);
      sortStatesRef.value = [].concat(sorters);
    }
    return {
      columns: columnsRef,
      handleUpdateSorter,
      data,
      pagination: paginationRef,
    };
  },
});
</script>

<style scoped>
</style>
